import { Button, Form, Input, Select, Tree } from "antd";
import { Component, createRef } from "react";
import { mainRoutes } from "../../../router";
import { roleGet, rolePost, rolePut, userReg } from "../../../api/user";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

class UserForm extends Component {
  formRef = createRef();
  state = {
    roleList: [],
  };
  onFinish = async (values) => {
    console.log(values);
    userReg(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  componentDidMount() {
    roleGet().then((res) => {
      this.setState({
        roleList: res.data.results,
      });
    });
  }

  render() {
    let { roleList } = this.state;
    return (
      <Form
        {...layout}
        name="control-hooks"
        ref={this.formRef}
        onFinish={this.onFinish}
        style={{
          maxWidth: 600,
        }}
      >
        <Form.Item
          name="username"
          label="账号名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="默认密码"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input type="password" />
        </Form.Item>
        <Form.Item
          name="roleId"
          label="用户权限"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择角色"
            options={roleList}
            fieldNames={{ label: "name", value: "objectId" }}
          ></Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.gender !== currentValues.gender
          }
        >
          {({ getFieldValue }) =>
            getFieldValue("gender") === "other" ? (
              <Form.Item
                name="customizeGender"
                label="Customize Gender"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            新增账号
          </Button>
          <Button htmlType="button" onClick={this.onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
export default UserForm;
